<template>
  <div class="page-container">
    <!--主页面列表-->
    <div>
      <!--工具栏-->
      <div class="toolbar">
        <el-form :inline="true" :model="filters" :size="size" ref="filters">
          <!-- 搜索框部分 -->
          <el-row class="search-input">

            <el-form-item label="商品类型：">
              <el-select v-model="filters.type" filterable placeholder="商品类型" clearable>
                <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品类目：">
              <el-select v-model="mineStatus" placeholder="请选择"    collapse-tags >
                <el-option :value="filters.categoryIdArr" style="height: auto">
                  <el-tree :data="selectCategoryData" accordion  show-checkbox node-key="id"   highlight-current :props="defaultProps" @check="(click, checked)=>{handleCheckChange(click, checked)}"></el-tree>
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="日期选择">
              <el-date-picker
                v-model="filters.createTime"
                type="datetime"
                placeholder="日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-row>
          <!-- 查询 刷新 部分 -->
          <el-row class="search-button">
            <el-form-item>
              <kt-button  icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage()"></kt-button>
            </el-form-item>

            <el-form-item>
              <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm('filters')"></kt-button>
            </el-form-item>

            <el-form-item>
              <el-button icon="el-icon-document-add" type="primary" size="small" @click="exportFile()">导出</el-button>
            </el-form-item>
          </el-row>




          <!--tab切换-->
          <div>
            <el-row class=" button mt20 noboder">
              <el-form-item>
                <el-tabs v-model="activeName"  type="card"  @tab-click="handTabChange">
                  <el-tab-pane label="全部" name="1"></el-tab-pane>
                  <el-tab-pane label="实体商品" name="4"></el-tab-pane>
                  <el-tab-pane label="虚拟商品" name="5"></el-tab-pane>
                </el-tabs>
              </el-form-item>
            </el-row>
          </div>
        </el-form>
      </div>
      </div>
      <div class="toolbar" style="float:right;padding-right:15px;">
        <table-column-filter-dialog  ref="tableColumnFilterDialog" :columns="columns" @handleFilterColumns="handleFilterColumns" ></table-column-filter-dialog>
      </div>
      <!--表格内容栏-->
      <cy-table
        :height="350"
        :operationWidth="300"
        :content="pageResult"
        :columns="filterColumns"
        :totalSize="totalSize"
        @findPage="findPage"
        :showLifeCycleOperation="false"
        :showCustomOperation="false"
        :showOperation="false"
        ref="CyTable"
      ></cy-table>
    </div>
</template>

<script>
import CyTable from "@/views/Pages/Product/BusinessProductTable";
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";

export default {
  components: {
    CyTable,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      defaultProps: {
        children: "categoryList",
        label: "name"
      },

      typeList: [
        {
          value: 1,
          label: "实体商品"
        },
        {
          value: 2,
          label: "虚拟商品"
        },
        {
          value: 3,
          label: "虚拟组合"
        },
        {
          value: 4,
          label: "实物组合"
        },
        {
          value: 11,
          label: "虚拟卡"
        },
        {
          value: 41,
          label: "虚拟充值"
        },
      ],
      mineStatus:[],
      selectCategoryData:[],
      activeName:'1',
      size: "small",
      filters: {
        buyTimeStart: "",
        buyTimeEnd: "",
        selectCategoryData:[],
        createTime:new Date()
      },
      columns: [
        { prop: "id", label: "序号", minWidth: 80 },
        { prop: "chineseName", label: "商户名称", minWidth: 110 },
        { prop: "code", label: "商户编码", minWidth: 110 },
        { prop: "name", label: "商户类型", minWidth: 110 },
        { prop: "fullNamePath", label: "销售订单总数", minWidth: 180 },
        {prop: "merchantName",label: "已发货订单数",minWidth: 110},
        { prop: "totalStock", label: "未发货订单数", minWidth: 100 },
        { prop: "cancelOrderWithTax", label: "取消订单数", minWidth: 100 },
        { prop: "returnGoodsWithTax", label: "退货订单数", minWidth: 100 },
        { prop: "salePriceWithTax", label: "销售额", minWidth: 100 },
      ],
      filterColumns: [],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: [],
      selections: [],
      totalSize: 0,
    };
  },
  methods: {

    handleCheckChange(click, checked) {
      let res = checked.checkedNodes;
      let arrLabel = [];
      let arr = checked.checkedKeys;
      res.forEach(item => {
        arrLabel.push(item.name);
      });
      this.filters.categoryIdArr = arr;
      this.mineStatus = arrLabel;
    },
    queryBrand(params){

    },
    // 每页数据刷新
    refreshPageRequest: function (pageNum) {
        this.pageRequest.pageNum = pageNum;
        this.queryBrand(this.pageRequest1);
    },
    // 每页条数刷新
    handleSizeChange: function (pageSize) {
        this.pageRequest.pageSize = pageSize;
        this.queryBrand();
    },
    selectCategory() {
      this.categoryDialogVisible = true;
      this.queryBehindCategory();
    },
    queryBehindCategory: function(data) {
      let params = {};
      let this_ = this;
      this.utils.request.queryBehindCategory(params, function(data) {
        this_.categoryData = data.data;
        this_.selectCategoryData = data.data;
      });
    },
    // 获取分页数据
    findPage: function(params) {
      let this_ = this;
      if (params == undefined || params == null) {
        params = {
          pageNum: this_.pageRequest.pageNum,
          pageSize: this_.pageRequest.pageSize
        };
      }
      if (this_.filters == undefined || this_.filters == null) {
        this_.filters = {};
      }
      this_.filters.start = params.pageNum;
      this_.filters.limit = params.pageSize;
      this.utils.request.queryPageProductManagement(this_.filters, function(
        res
      ) {
        if (res.code == "0000") {
          this_.pageResult = res.data.rows;
          this_.totalSize = Number(res.data.total);
        } else {
          this_.$message({ message: "操作失败, " + res.msg, type: "error" });
        }
      });
    },

    handTabChange(tab, event) {
      let param = tab.name;
      if (param == 1) {
        this.filters.canSale = "";
        this.filters.status = "";
        this.findPage();
      } else if (param == 2) {
        this.filters.canSale = 1;
        this.filters.status = "";
        this.findPage();
      } else if (param == 3) {
        this.filters.canSale = 0;
        this.filters.status = "";
        this.findPage();
      } else if (param == 4) {
        this.filters.canSale = "";
        this.filters.status = "0";
        this.findPage();
      } else if (param == 5) {
        this.filters.canSale = "";
        this.filters.status = "1";
        this.findPage();
      } else if (param == 6) {
        this.filters.canSale = "";
        this.filters.status = "2";
        this.findPage();
      } else if (param == 7) {
        this.filters.canSale = "";
        this.filters.status = "3";
        this.findPage();
      }
    },
    //导出

    exportFile(){
      console.log("执行导出逻辑");
      //TODO

      this.downloadExcel();

    },

    // 重置
    resetForm() {
      this.filters = {
        chineseName: "",
        code: "",
        thirdProductCode: "",
        brandId: "",
        brandName: "",
        categoryId: "",
        combineType: "",
        canSale: ""
      };
      this.findPage();
    },
    // 处理表格列过滤显示
    displayFilterColumnsDialog: function() {
      this.$refs.tableColumnFilterDialog.setDialogVisible(true);
    },
    // 处理表格列过滤显示
    handleFilterColumns: function(data) {
      this.filterColumns = data.filterColumns;
      this.$refs.tableColumnFilterDialog.setDialogVisible(false);
    },
    // 处理表格列过滤显示
    initColumns: function() {
      let temp = [];

      $.each(this.columns, function(key, val) {
        temp.push(val);
      });
      this.filterColumns = temp;
    },
    // 时间格式化
    dateFormat: function(row, column, cellValue, index) {
      return format(row[column.property]);
    },
    handleSelectionChange(val) {
      this.selections = val;
    },
    //列表下载
    downloadExcel() {
      this.$confirm("确定下载列表文件?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let filename = "商户销售数据下载";
          this.$refs.CyTable.exportData(
            this.filters,
            this.filterColumns,
            filename
          );
        })
        .catch(() => {});
    }
  },
  mounted() {
    this.initColumns();
    this.queryBehindCategory();
  }
};
</script>

<style scoped lang="scss">
/* 设置顶部筛选条件 */
// .commonStyle {
//   width: 160px;
// }

// .commonStyle el-select {
//   width: 100%;
// }

#hiddenId {
  height: 20px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}

#middleInfo {
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}

#rowMargin {
  margin-bottom: 14px;
}

#secondRow {
  border-bottom: 1px solid #ccc;
}

#underSelector {
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}

#footerButton {
  padding-top: 20px;
}

</style>
